<script setup>
// 互动雷达链接内容
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import NewRadarLink from './newRadarLink.vue'
import { toRaw } from '@vue/reactivity'
import { postRadarList,postRadarDel } from '@/api'
import { ElMessage } from 'element-plus'

const router = useRouter()
const inputLinked = ref([])
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const getData = (val)=>{
if (val) page.value = val
postRadarList({
   page:page.value,size:10,title:inputLinked.title
}).then((res) => {
    total.value = res.data.count
    tableData.value = res.data.item
	urldata.value = res.data.url
})
} 
getData()
const isRefresh = ref(true)
const dele = async(id)=>{
	const r = await postRadarDel({id:id})
	if (r) {
		ElMessage.success('删除成功')
	}
}

const emits = defineEmits(['showEdit', 'editLink', 'deleteFun'])
const dialogVisible = ref(false)
const editQr = ref(null)
const showEdit = (val) => {
	console.log(val)
		dialogVisible.value = true
		setTimeout(()=>{
			editQr.value.show(val)
		},1)


}
// const editsopapi = (val) => {
// 	var data = {
// 		show: true,
// 		id: val,
// 		name: val.name
// 	}
// 	edit.value.addapi(data)
// }
const groupchatapi = (val) => {
	console.log(val)
}
const urldata =ref('')
const abc =(val)=>{
//   const range = document.createRange(); //创建range对象
// 	range.selectNode(document.getElementById(urldata)); //获取复制内容的 id 选择器
// 	const selection = window.getSelection();  //创建 selection对象
// 	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
// 	selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
// 	document.execCommand('copy'); //复制选中的文字到剪贴板
// 	// this.$toast('复制成功')
//   ElMessage({
//     message: '复制成功',
//     type: 'success',
//   })
// 	selection.removeRange(range); // 移除选中的元素
let oInput = document.createElement('input');
            // 将想要复制的值
            oInput.value = urldata.value;
            // 页面底部追加输入框
            document.body.appendChild(oInput);
            // 选中输入框
            oInput.select();
            // 执行浏览器复制命令
            document.execCommand('Copy');
            // 弹出复制成功信息
            // this.$message.success('复制成功');
			ElMessage({
				message: '复制成功',
				type: 'success',
			})
            // 复制后移除输入框
            oInput.remove();
}
</script>
<template>
	<div class="enterpriseStyle" v-if="!dialogVisible">
		<el-tabs type="card">
			<el-tab-pane label="链接">
				<div class="linkStyle">
					<div>雷达链接(共{{ total }}个)</div>
					<div class="linkStyleChild">
						<el-input
							@keyup.enter.native="(val)=>getData(1)"
							v-model="inputLinked"
							class="w-50 m-2"
							placeholder="请输入要搜索的雷达标题"
							:suffix-icon="Search"
						/>
						<el-button type="primary" @click="showEdit" style="margin-left: 20px">新建雷达链接</el-button>
						<el-button type="primary" @click="abc('urlvalue')" style="margin-left: 20px">复制链接</el-button>
					</div>
				</div>
				<!--  表格 -->
				<div class="tableStyle">
					<el-table :data="tableData" style="width: 100%; border-radius: 10px">
						<el-table-column prop="radar" label="雷达" width="240">
							<template #default="scope">
								<div v-if="scope.row.image_url !== ''">
									<div style="color: #13a7af">[共{{ scope.row.ex_tag.length }}条数据]</div>
									<div style="display: flex; align-items: center">
										<span class="tableStady">{{ scope.row.description }}</span>
										<el-avatar shape="square" :src="scope.row.image_url" />
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="title" label="雷达标题" width="240" />
						<el-table-column prop="ex_tag" label="客户标签" width="240">
							<template #default="scope">
								<div v-if="scope.row.ex_tag !== ''">
									<div v-if="scope.row.ex_tag_inform == 1">
										<el-tag class="ml-2" type="info" v-for="(item, index) in scope.row.ex_tag" :key="index">
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</el-tag>
									</div>
									<span class="app-gap-words-left-xs" v-if="scope.row.ex_tag_inform == 0">-</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="link_title" label="创建人" width="">
							<template #default="scope">
								<div class="app-words-box">
									<div class="app-flex-left">
										<MyIcon class="app-down-icon primary-font" name="Person" />
										<span class="app-gap-words-left-xs">{{ scope.row.link_title }}</span>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="size" label="点击人数" width="" />
						<el-table-column prop="utime" label="创建时间" width="" />
						<el-table-column prop="operation" label="操作">
							<template #default="scope">
								<div style="display: flex">
									<!-- <div>
										<el-button link type="primary">分享</el-button>
									</div>
									<div>
										<el-button link type="primary">数据</el-button>
									</div> -->
									<div>
										<el-button link type="primary" @click="showEdit(scope.row)">编辑</el-button>
									</div>
									<div>
										<el-button link type="primary" @click="dele(scope.row.id)">删除</el-button>
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				 <el-pagination style="margin-top:10px;margin-bottom:10px" :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
			</el-tab-pane>
			<!-- <el-tab-pane label="文章">
				<ArticleTable></ArticleTable>
			</el-tab-pane>
			<el-tab-pane label="PDF">Role</el-tab-pane> -->
		</el-tabs>
		
	</div>
	<NewRadarLink v-else ref="editQr" @goBack="dialogVisible = false;getData()" :groupchatapi="groupchatapi" />
</template>
<style>
.el-page-header {
  display:none;
}
</style>
<style scoped>
.enterpriseStyle {
	margin: 20px;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 10px;
}
.linkStyle {
	display: flex;
	justify-content: space-between;
}
.linkStyleChild {
	display: flex;
	justify-content: space-between;
}
.tableStyle {
	margin: 20px 20px;
}
.tableStady {
	width: 75px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
